<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.13. Common idioms without dedicated elements</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="semantics-scripting.html#semantics-scripting"><span class="secno">4.12</span> <span class="content">Scripting</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="disabled-elements.html#disabled-elements"><span class="secno">4.14</span> <span class="content">Disabled elements</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements"><span class="secno">4.13</span> <span class="content">Common idioms without dedicated elements</span></a>
       <ol class="toc">
        <li><a href="common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines"><span class="secno">4.13.1</span> <span class="content">Subheadings, subtitles, alternative titles and taglines</span></a>
        </li><li><a href="common-idioms-without-dedicated-elements.html#bread-crumb-navigation"><span class="secno">4.13.2</span> <span class="content">Bread crumb navigation</span></a>
        </li><li><a href="common-idioms-without-dedicated-elements.html#sec-tag-clouds"><span class="secno">4.13.3</span> <span class="content"><span>Tag clouds</span></span></a>
        </li><li><a href="common-idioms-without-dedicated-elements.html#conversations"><span class="secno">4.13.4</span> <span class="content">Conversations</span></a>
        </li><li><a href="common-idioms-without-dedicated-elements.html#footnotes"><span class="secno">4.13.5</span> <span class="content">Footnotes</span></a>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.13" id="common-idioms-without-dedicated-elements"><span class="secno">4.13. </span><span class="content">Common idioms without dedicated elements</span><a class="self-link" href="common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements"></a></h3>
     <h4 class="heading settled" data-level="4.13.1" id="subheadings-subtitles-alternative-titles-and-taglines"><span class="secno">4.13.1. </span><span class="content">Subheadings, subtitles, alternative titles and taglines</span><a class="self-link" href="common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines"></a></h4>
      HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines. Here are the suggested alternatives. <code>h1</code>–<code>h6</code> elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. 
     <div class="example" id="example-32efe018">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-32efe018"></a> In the following example the title and subtitles of a web page are grouped using a <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-28">header</a></code> element.
    As the author does not want the subtitles to be included the table of contents and they are not intended to signify
    the start of a new section, they are marked up using <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-29">p</a></code> elements. A sample CSS styled rendering of the
    title and subtitles is provided below the code example. 
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;h1&gt;</span>HTML 5.1 Nightly<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>A vocabulary and associated APIs for HTML and XHTML<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Editor’s Draft 9 May 2013<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre>
      <p><img alt="Title:'HTML 5.1 Nightly' in a mid blue Sans Serif font.
    Subtitle 1:'A vocabulary and associated APIs for HTML and XHTML' on a new line, same style smaller font size.
    Subtitle 2:'Editor’s Draft 9 May 2013' on a new line, same style and size as subtitle 1." src="images/htmlheading.png"></p>
     </div>
     <div class="example" id="example-f6ce579a">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-f6ce579a"></a> In the following example the subtitle of a book is on the same line as the title separated by a colon. A sample CSS styled rendering of the
    title and subtitle is provided below the code example. 
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>The Lord of the Rings: The Two Towers<span class="nt">&lt;/h1&gt;</span>
</pre>
      <p><img alt="Title and subtitle:'The Lord of the Rings: The Two Towers' in a gold colored Gothic style Serif font on a black background." height="43" src="images/lotr.PNG" width="414"></p>
     </div>
     <div class="example" id="example-31cb67b2">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-31cb67b2"></a> In the following example part of an album title is included in a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-16">span</a></code> element,
    allowing it to be styled differently from the rest of the title. A <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-13">br</a></code> element is used to
    place the album title on a new line. A sample CSS styled rendering of the heading is provided
    below the code example. 
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>Ramones <span class="nt">&lt;br&gt;</span>
<span class="nt">&lt;span&gt;</span>Hey! Ho! Let’s Go<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/h1&gt;</span>
</pre>
      <p><img alt=" Line 1:'Ramones' displayed in a large bold angular hand writing style font with a spray can paint effect. Line 2:'Hey! Ho! Let’s Go' displayed in a smaller, standard sans serif style font." height="93" src="images/ramones.png" width="255"></p>
     </div>
     <div class="example" id="example-112624dd">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-112624dd"></a> In the following example the title and tagline for a news article are grouped using a <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-29">header</a></code> element.
    The title is marked up using a <code>h2</code> element and the tagline is in a <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-30">p</a></code> element. A sample CSS styled rendering of the
    title and tagline is provided below the code example. 
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;h2&gt;</span>3D films set for popularity slide <span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>First drop in 3D box office projected for this year despite hotly tipped summer blockbusters,
  according to Fitch Ratings report<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre>
      <p><img alt=" Title:'3D films set for popularity slide' in a large, bold, dark blue Serif font style. Paragraph: 'First drop in 3D box office projected for this year despite...' in a smaller, dark grey, Sans Serif font style." height="74" src="images/title-tagline.PNG" width="454"></p>
     </div>
     <div class="example" id="example-d99bcbfe">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-d99bcbfe"></a> In this last example the title and taglines for a news magazine are grouped using a <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-30">header</a></code> element.
    The title is marked up using a <code>h1</code> element and the taglines are each in a <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-31">p</a></code> element. A sample CSS styled rendering of the
    title and taglines is provided below the code example. 
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;p&gt;</span>Magazine of the Decade<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;h1&gt;</span>THE MONTH<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>The Best of UK and Foreign Media<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre>
      <p><img alt="Tagline above the heading:'Magazine of the Decade'. Tagline below the heading 'The Best of UK and Foreign Media' both in a small,all caps, sans-serif font style. Heading:'The Month' in a large, Serif font style. All text is black against a red background." height="84" src="images/themonth.png" width="378"></p>
     </div>
     <h4 class="heading settled" data-level="4.13.2" id="bread-crumb-navigation"><span class="secno">4.13.2. </span><span class="content">Bread crumb navigation</span><a class="self-link" href="common-idioms-without-dedicated-elements.html#bread-crumb-navigation"></a></h4>
     <p>This specification does not provide a machine-readable way of describing bread-crumb navigation
  menus. Authors are encouraged to markup bread-crumb navigation as a list. The <code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-21">nav</a></code> element can be used to mark the
  list containing links as being a navigation block.</p>
     <div class="example" id="example-9c7d0afd">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-9c7d0afd"></a> In the following example, the current page can be reached via the path indicated. The path is indicated using the right arrow symbol "→". A text label is provided to give the user context. The links are structured as a list, which provides users with an indication of item number. 
<pre class="highlight"><span class="nt">&lt;nav&gt;</span>
  <span class="nt">&lt;h2&gt;</span>You are here:<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"navlist"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>Main<span class="nt">&lt;/a&gt;</span> →<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/products/"</span><span class="nt">&gt;</span>Products<span class="nt">&lt;/a&gt;</span> →<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/products/dishwashers/"</span><span class="nt">&gt;</span>Dishwashers<span class="nt">&lt;/a&gt;</span> →<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;a&gt;</span>Second hand<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre>
      <p>The breadcrumb code example could be styled as a horizonatal list using CSS: <img alt="The heading and the links are displayed on one line." height="30" src="images/breadcrumb.png" width="423"></p>
      <p class="note" role="note"> The use of the right angle bracket symbol "&gt;" to indicate path direction
  is discouraged as its meaning, in the context used, is not clearly conveyed to all users. </p>
     </div>
     <h4 class="heading settled" data-level="4.13.3" id="sec-tag-clouds"><span class="secno">4.13.3. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="tag-clouds">Tag clouds</dfn></span><a class="self-link" href="common-idioms-without-dedicated-elements.html#sec-tag-clouds"></a></h4>
     <p>This specification does not define any markup specifically for marking up lists
  of keywords that apply to a group of pages (also known as <i>tag clouds</i>). In general, authors
  are encouraged to either mark up such lists using <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-15">ul</a></code> elements with explicit inline
  counts that are then hidden and turned into a presentational effect using a style sheet, or to use
  SVG.</p>
     <div class="example" id="example-b7feab0d">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-b7feab0d"></a> Here, three tags are included in a short tag cloud: 
<pre class="highlight"><span class="nt">&lt;style&gt;</span>
<span class="k">@media</span> <span class="nt">screen</span><span class="o">,</span> <span class="nt">print</span><span class="o">,</span> <span class="nt">handheld</span><span class="o">,</span> <span class="nt">tv</span> <span class="p">{</span>
  <span class="c">/* should be ignored by non-visual browsers */</span>
  <span class="nc">.tag-cloud</span> <span class="o">&gt;</span> <span class="nt">li</span> <span class="o">&gt;</span> <span class="nt">span</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
  <span class="nc">.tag-cloud</span> <span class="o">&gt;</span> <span class="nt">li</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="p">;</span> <span class="p">}</span>
  <span class="nc">.tag-cloud-1</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">0.7em</span><span class="p">;</span> <span class="p">}</span>
  <span class="nc">.tag-cloud-2</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">0.9em</span><span class="p">;</span> <span class="p">}</span>
  <span class="nc">.tag-cloud-3</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">1.1em</span><span class="p">;</span> <span class="p">}</span>
  <span class="nc">.tag-cloud-4</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">1.3em</span><span class="p">;</span> <span class="p">}</span>
  <span class="nc">.tag-cloud-5</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">1.5em</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
...
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"tag-cloud"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"tag-cloud-4"</span><span class="nt">&gt;&lt;a</span> <span class="na">title=</span><span class="s">"28 instances"</span> <span class="na">href=</span><span class="s">"/t/apple"</span><span class="nt">&gt;</span>apple<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;span&gt;</span>(popular)<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"tag-cloud-2"</span><span class="nt">&gt;&lt;a</span> <span class="na">title=</span><span class="s">"6 instances"</span>  <span class="na">href=</span><span class="s">"/t/kiwi"</span><span class="nt">&gt;</span>kiwi<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;span&gt;</span>(rare)<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"tag-cloud-5"</span><span class="nt">&gt;&lt;a</span> <span class="na">title=</span><span class="s">"41 instances"</span> <span class="na">href=</span><span class="s">"/t/pear"</span><span class="nt">&gt;</span>pear<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;span&gt;</span>(very popular)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</pre>
      <p>The actual frequency of each tag is given using the <code>title</code> attribute. A CSS style sheet is provided to convert the markup into a cloud of differently-sized
    words, but for user agents that do not support CSS or are not visual, the markup contains
    annotations like "(popular)" or "(rare)" to categorize the various tags by frequency, thus
    enabling all users to benefit from the information.</p>
      <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-16">ul</a></code> element is used (rather than <code>ol</code>) because the order is not
    particularly important: while the list is in fact ordered alphabetically, it would convey the
    same information if ordered by, say, the length of the tag.</p>
      <p>The <code>tag</code> <code>rel</code>-keyword is <em>not</em> used on these <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-82">a</a></code> elements because they do not represent tags that apply
    to the page itself; they are just part of an index listing the tags themselves.</p>
     </div>
     <h4 class="heading settled" data-level="4.13.4" id="conversations"><span class="secno">4.13.4. </span><span class="content">Conversations</span><a class="self-link" href="common-idioms-without-dedicated-elements.html#conversations"></a></h4>
     <p>This specification does not define a specific element for marking up conversations, meeting
  minutes, chat transcripts, dialogs in screenplays, instant message logs, and other situations
  where different players take turns in discourse.</p>
     <p>Instead, authors are encouraged to mark up conversations using <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-32">p</a></code> elements and
  punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-17">span</a></code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-18">b</a></code>. Paragraphs with their text wrapped in the <code>i</code> element can be used for marking up stage directions.</p>
     <div class="example" id="example-5b21ee45">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-5b21ee45"></a> This example demonstrates this using an extract from Abbot and Costello’s famous sketch, <cite>Who’s on first</cite>: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span> Costello: Look, you gotta first baseman?
<span class="nt">&lt;p&gt;</span> Abbott: Certainly.
<span class="nt">&lt;p&gt;</span> Costello: Who’s playing first?
<span class="nt">&lt;p&gt;</span> Abbott: That’s right.
<span class="nt">&lt;p&gt;</span> Costello becomes exasperated.
<span class="nt">&lt;p&gt;</span> Costello: When you pay off the first baseman every month, who gets the money?
<span class="nt">&lt;p&gt;</span> Abbott: Every dollar of it.
</pre>
     </div>
     <div class="example" id="example-0a73cc74">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-0a73cc74"></a> The following extract shows how an IM conversation log could be marked up, using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-6">data</a></code> element to provide Unix timestamps for each line. Note that the timestamps are
    provided in a format that the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-18">time</a></code> element does not support, so the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-7">data</a></code> element is used instead (namely, Unix <code>time_t</code> timestamps).
    Had the author wished to mark up the data using one of the date and time formats supported by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-19">time</a></code> element, that element could have been used instead of <code>data</code>. This
    could be advantageous as it would allow data analysis tools to detect the timestamps
    unambiguously, without coordination with the page author. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span> <span class="nt">&lt;data</span> <span class="na">value=</span><span class="s">"1319898155"</span><span class="nt">&gt;</span>14:22<span class="nt">&lt;/data&gt;</span> <span class="nt">&lt;b&gt;</span>egof<span class="nt">&lt;/b&gt;</span> I’m not that nerdy, I’ve only seen 30% of the star trek episodes
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;data</span> <span class="na">value=</span><span class="s">"1319898192"</span><span class="nt">&gt;</span>14:23<span class="nt">&lt;/data&gt;</span> <span class="nt">&lt;b&gt;</span>kaj<span class="nt">&lt;/b&gt;</span> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;data</span> <span class="na">value=</span><span class="s">"1319898200"</span><span class="nt">&gt;</span>14:23<span class="nt">&lt;/data&gt;</span> <span class="nt">&lt;b&gt;</span>egof<span class="nt">&lt;/b&gt;</span> it’s unarguably
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;data</span> <span class="na">value=</span><span class="s">"1319898228"</span><span class="nt">&gt;</span>14:23<span class="nt">&lt;/data&gt;</span> <span class="nt">&lt;i&gt;</span>* kaj blinks<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;data</span> <span class="na">value=</span><span class="s">"1319898260"</span><span class="nt">&gt;</span>14:24<span class="nt">&lt;/data&gt;</span> <span class="nt">&lt;b&gt;</span>kaj<span class="nt">&lt;/b&gt;</span> you are not helping your case
</pre>
     </div>
     <div class="example" id="example-6e2236d1">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-6e2236d1"></a> HTML does not have a good way to mark up graphs, so descriptions of interactive conversations
    from games are more difficult to mark up. This example shows one possible convention using <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-24">dl</a></code> elements to list the possible responses at each point in the conversation.
    Another option to consider is describing the conversation in the form of a DOT file, and
    outputting the result as an SVG image to place in the document. <a data-link-type="biblio" href="references.html#biblio-dot">[DOT]</a> 
<pre class="highlight"><span class="nt">&lt;p&gt;</span> Next, you meet a fisherman. You can say one of several greetings:
<span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span> "Hello there!"
  <span class="nt">&lt;dd&gt;</span>
  <span class="nt">&lt;p&gt;</span> He responds with "Hello, how may I help you?"; you can respond with:
  <span class="nt">&lt;dl&gt;</span>
    <span class="nt">&lt;dt&gt;</span> "I would like to buy a fish."
    <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> He sells you a fish and the conversation finishes.
    <span class="nt">&lt;dt&gt;</span> "Can I borrow your boat?"
    <span class="nt">&lt;dd&gt;</span>
    <span class="nt">&lt;p&gt;</span> He is surprised and asks "What are you offering in return?".
    <span class="nt">&lt;dl&gt;</span>
      <span class="nt">&lt;dt&gt;</span> "Five gold." (if you have enough)
      <span class="nt">&lt;dt&gt;</span> "Ten gold." (if you have enough)
      <span class="nt">&lt;dt&gt;</span> "Fifteen gold." (if you have enough)
      <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> He lends you the boat. The conversation ends.
      <span class="nt">&lt;dt&gt;</span> "A fish." (if you have one)
      <span class="nt">&lt;dt&gt;</span> "A newspaper." (if you have one)
      <span class="nt">&lt;dt&gt;</span> "A pebble." (if you have one)
      <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> "No thanks", he replies. Your conversation options
      at this point are the same as they were after asking to borrow
      the boat, minus any options you’ve suggested before.
    <span class="nt">&lt;/dl&gt;</span>
    <span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/dd&gt;</span>
  <span class="nt">&lt;dt&gt;</span> "Vote for me in the next election!"
  <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> He turns away. The conversation finishes.
  <span class="nt">&lt;dt&gt;</span> "Sir, are you aware that your fish are running away?"
  <span class="nt">&lt;dd&gt;</span>
  <span class="nt">&lt;p&gt;</span> He looks at you skeptically and says "Fish cannot run, sir".
  <span class="nt">&lt;dl&gt;</span>
    <span class="nt">&lt;dt&gt;</span> "You got me!"
    <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> The fisherman sighs and the conversation ends.
    <span class="nt">&lt;dt&gt;</span> "Only kidding."
    <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> "Good one!" he retorts. Your conversation options at this
    point are the same as those following "Hello there!" above.
    <span class="nt">&lt;dt&gt;</span> "Oh, then what are they doing?"
    <span class="nt">&lt;dd&gt;</span> <span class="nt">&lt;p&gt;</span> He looks at his fish, giving you an opportunity to steal
    his boat, which you do. The conversation ends.
  <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <div class="example" id="example-31d9b363">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-31d9b363"></a> In some games, conversations are simpler: each character merely has a fixed set of lines that
    they say. In this example, a game FAQ/walkthrough lists some of the known possible responses for
    each character: 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Dialog<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;&lt;small&gt;</span>Some characters repeat their lines in order each time you interact
  with them, others randomly pick from amongst their lines. Those who respond in
  order have numbered entries in the lists below.<span class="nt">&lt;/small&gt;</span>
  <span class="nt">&lt;h2&gt;</span>The Shopkeeper<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>How may I help you?
  <span class="nt">&lt;li&gt;</span>Fresh apples!
  <span class="nt">&lt;li&gt;</span>A loaf of bread for madam?
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;h2&gt;</span>The pilot<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>Before the accident:
  <span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;/li&gt;</span>I’m about to fly out, sorry!
  <span class="nt">&lt;/li&gt;</span>Sorry, I’m just waiting for flight clearance and then I’ll be off!
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;p&gt;</span>After the accident:
  <span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;</span>I’m about to fly out, sorry!
  <span class="nt">&lt;li&gt;</span>Ok, I’m not leaving right now, my plane is being cleaned.
  <span class="nt">&lt;li&gt;</span>Ok, it’s not being cleaned, it needs a minor repair first.
  <span class="nt">&lt;li&gt;</span>Ok, ok, stop bothering me! Truth is, I had a crash.
  <span class="nt">&lt;/ol&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Clan Leader<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>During the first clan meeting:
  <span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>Hey, have you seen my daughter? I bet she’s up to something nefarious again...
  <span class="nt">&lt;li&gt;</span>Nice weather we’re having today, eh?
  <span class="nt">&lt;li&gt;</span>The name is Bailey, Jeff Bailey. How can I help you today?
  <span class="nt">&lt;li&gt;</span>A glass of water? Fresh from the well!
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;p&gt;</span>After the earthquake:
  <span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;</span>Everyone is safe in the shelter, we just have to put out the fire!
  <span class="nt">&lt;li&gt;</span>I’ll go and tell the fire brigade, you keep hosing it down!
  <span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.13.5" id="footnotes"><span class="secno">4.13.5. </span><span class="content">Footnotes</span><a class="self-link" href="common-idioms-without-dedicated-elements.html#footnotes"></a></h4>
     <p>HTML does not have a dedicated mechanism for marking up footnotes. Here are the suggested
  alternatives.</p>
     <hr>
     <p>For short inline annotations, the <code>title</code> attribute could  be used.</p>
     <div class="example" id="example-aa5edb93">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-aa5edb93"></a> In this example, two parts of a dialog are annotated with footnote-like content using the <code>title</code> attribute. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span> <span class="nt">&lt;b&gt;</span>Customer<span class="nt">&lt;/b&gt;</span>: Hello! I wish to register a complaint. Hello. Miss?
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;b&gt;</span>Shopkeeper<span class="nt">&lt;/b&gt;</span>: <span class="nt">&lt;span</span> <span class="na">title=</span><span class="s">"Colloquial pronunciation of 'What do you'"</span>
<span class="nt">&gt;</span>Watcha<span class="nt">&lt;/span&gt;</span> mean, miss?
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;b&gt;</span>Customer<span class="nt">&lt;/b&gt;</span>: Uh, I’m sorry, I have a cold. I wish to make a complaint.
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;b&gt;</span>Shopkeeper<span class="nt">&lt;/b&gt;</span>: Sorry, <span class="nt">&lt;span</span> <span class="na">title=</span><span class="s">"This is, of course, a lie."</span><span class="nt">&gt;</span>we’re
closing for lunch<span class="nt">&lt;/span&gt;</span>.
</pre>
     </div>
     <p class="warning">Relying on the <code>title</code> attribute for the visual display
  of text content is currently discouraged as many user agents do not expose the attribute in an accessible manner
  as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear,
  which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or
  tablet).</p>
     <p class="note" role="note"> If the <code>title</code> attribute is used, CSS can be used to
  draw the reader’s attention to the elements with the attribute. </p>
     <div class="example" id="example-6b9d711c">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-6b9d711c"></a> For example, the following CSS places a dashed line below elements that have a <code>title</code> attribute. 
<pre class="highlight"><span class="nt">[title] </span><span class="p">{</span> <span class="k">border-bottom</span><span class="p">:</span> thin dashed<span class="p">;</span> <span class="p">}</span>
</pre>
     </div>
     <hr>
     <p>For
  annotations, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-83">a</a></code> element should be used, pointing to
  an element later in the document. The convention is that the
  contents of the link be a number in square brackets.</p>
     <div class="example" id="example-d9aa5135">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-d9aa5135"></a> In this example, a footnote in the dialog links to a paragraph below the dialog. The
    paragraph then reciprocally links back to the dialog, allowing the user to return to the
    location of the footnote. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span> Announcer: Number 16: The <span class="nt">&lt;i&gt;</span>hand<span class="nt">&lt;/i&gt;</span>.
<span class="nt">&lt;p&gt;</span> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <span class="nt">&lt;em&gt;</span>do<span class="nt">&lt;/em&gt;</span> you
contradict people?
<span class="nt">&lt;p&gt;</span> Norman: I don’t. <span class="nt">&lt;sup&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#fn1"</span> <span class="na">id=</span><span class="s">"r1"</span><span class="nt">&gt;</span>[1]<span class="nt">&lt;/a&gt;&lt;/sup&gt;</span>
<span class="nt">&lt;p&gt;</span> Interviewer: You told me you did!
<em>...</em>
<span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"fn1"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#r1"</span><span class="nt">&gt;</span>[1]<span class="nt">&lt;/a&gt;</span> This is, naturally, a lie,
  but paradoxically if it were true he could not say so without
  contradicting the interviewer and thus making it false.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
     </div>
     <hr>
     <p>For side notes, longer annotations that apply to entire sections of the text rather than just
  specific words or sentences, the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-23">aside</a></code> element should be used.</p>
     <div class="example" id="example-cba5e16f">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-cba5e16f"></a> In this example, a sidebar is given after a dialog, giving it some context. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"speaker"</span><span class="nt">&gt;</span>Customer<span class="nt">&lt;/span&gt;</span>: I will not buy this record, it is scratched.
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"speaker"</span><span class="nt">&gt;</span>Shopkeeper<span class="nt">&lt;/span&gt;</span>: I’m sorry?
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"speaker"</span><span class="nt">&gt;</span>Customer<span class="nt">&lt;/span&gt;</span>: I will not buy this record, it is scratched.
<span class="nt">&lt;p&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"speaker"</span><span class="nt">&gt;</span>Shopkeeper<span class="nt">&lt;/span&gt;</span>: No no no, this is a tobacconist’s.
<span class="nt">&lt;aside</span> <span class="na">role=</span><span class="s">"note"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>In 1970, the British Empire lay in ruins, and foreign
  nationalists frequented the streets — many of them Hungarians
  (not the streets — the foreign nationals). Sadly, Alexander
  Yalt has been publishing incompetently-written phrase books.
<span class="nt">&lt;/aside&gt;</span>
</pre>
      <p class="note" role="note"> In the example above an ARIA <code>role="note"</code>, permitted for use on <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-24">aside</a></code>,
has been added to override the default semantics of the <code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-25">aside</a></code> element, as the use of the
element in this context, more closely matches the <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#note">note</a> role. </p>
     </div>
     <hr>
     <p>For figures or tables, footnotes can be included in the relevant <code>figcaption</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-28">caption</a></code> element, or in surrounding prose.</p>
     <div class="example" id="example-7cf40577">
      <a class="self-link" href="common-idioms-without-dedicated-elements.html#example-7cf40577"></a> In this example, a  table has cells with footnotes that are given in prose. A <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-34">figure</a></code> element is used to give a single legend to the combination of the table and
    its footnotes. 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>Table 1. Alternative activities for knights.<span class="nt">&lt;/figcaption&gt;</span>
  <span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span> Activity
    <span class="nt">&lt;th&gt;</span> Location
    <span class="nt">&lt;th&gt;</span> Cost
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span> Dance
    <span class="nt">&lt;td&gt;</span> Wherever possible
    <span class="nt">&lt;td&gt;</span> £0<span class="nt">&lt;sup&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#fn1"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/sup&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span> Routines, chorus scenes<span class="nt">&lt;sup&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#fn2"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/sup&gt;</span>
    <span class="nt">&lt;td&gt;</span> Undisclosed
    <span class="nt">&lt;td&gt;</span> Undisclosed
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span> Dining<span class="nt">&lt;sup&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#fn3"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/sup&gt;</span>
    <span class="nt">&lt;td&gt;</span> Camelot
    <span class="nt">&lt;td&gt;</span> Cost of ham, jam, and spam<span class="nt">&lt;sup&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#fn4"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/a&gt;&lt;/sup&gt;</span>
  <span class="nt">&lt;/table&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"fn1"</span><span class="nt">&gt;</span>1. Assumed.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"fn2"</span><span class="nt">&gt;</span>2. Footwork impeccable.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"fn3"</span><span class="nt">&gt;</span>3. Quality described as "well".<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"fn4"</span><span class="nt">&gt;</span>4. A lot.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="semantics-scripting.html#semantics-scripting"><span class="secno">4.12</span> <span class="content">Scripting</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="disabled-elements.html#disabled-elements"><span class="secno">4.14</span> <span class="content">Disabled elements</span></a> →</p></body></html>
